<template>
  <!-- 数据面板 -->
  <div class="data-panel" :class="trend">
    <div class="panel-icon">{{ icon }}</div>
    <div class="panel-content">
      <h3 class="panel-title">{{ title }}</h3>
      <div class="panel-value">{{ value }}</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
    title: String,
    value: [String, Number],
    icon: String,
    trend: {
        type: String,
        default: 'up',
        validator: (value) => ['up', 'down', 'flat'].includes(value)
    }
});
</script>

<style lang="scss" scoped>
.data-panel {
  @extend .glass-panel !optional;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  position: relative;
  overflow: hidden;
  
  &.up::before {
    content: '↑';
    position: absolute;
    top: 10px;
    right: 10px;
    color: #00f2fe;
    font-size: 1.2rem;
    animation: bounce 1s infinite alternate;
  }
  
  &.down::before {
    content: '↓';
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ff5e5e;
    font-size: 1.2rem;
    animation: bounce 1s infinite alternate;
  }
  
  &.flat::before {
    content: '→';
    position: absolute;
    top: 10px;
    right: 10px;
    color: #4facfe;
    font-size: 1.2rem;
  }
}

.panel-icon {
  font-size: 2.5rem;
  margin-right: 15px;
  color: #4facfe;
}

.panel-content {
  flex: 1;
}

.panel-title {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 5px 0;
  font-size: 1rem;
}

.panel-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  margin: 0;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-3px);
  }
}
</style>